<template>
  <view class="device-list" @click="onClick">
    <view class="device-item">
      <view class="device-title">
        <text class="device-name">{{ data.pointName }}</text>
        <text class="device-type">{{ data.counterType == '1' ? '有屏幕快递柜' : '无屏幕快递柜' }}</text>
      </view>
      <view class="device-status">
        <text class="status-tag status-tag_1" v-if="data.counterStatus == '0'">在线</text>
        <text class="status-tag status-tag_2" v-else-if="data.counterStatus == '1'">离线</text>
        <text class="status-tag status-tag_3" v-if="data.onlineStatus == '0'">营业</text>
      </view>
      <view class="device-info">
        <view>设备编号：{{ data.counterNo }}</view>
        <view>柜子数量：{{ data.cabinetSum }}</view>
        <view>设备位置：{{ data.counterAlias }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useNavigatePage } from '@/hooks/navigateTo'
  import { PropType, defineProps } from 'vue'

  const props = defineProps({
    data: {
      type: Object as PropType<any>,
      required: true,
    },
  })
  const navigatePage = useNavigatePage()
  const onClick = () => {
    navigatePage.navigateTo(`/pages/zmanager/device/detail?counterNo=${props.data.counterNo}`)
  }
</script>
<style lang="scss" scoped>
  /* 设备列表样式 - 优化版 */
  .device-list {
    padding: 0 24rpx;

    .device-item {
      padding: 24rpx;
      margin-bottom: 24rpx;
      border: 1px solid #e6e6e6;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;

      &:active {
        background: #f9f9f9;
        transform: translateY(2rpx);
      }

      .device-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .device-name {
          font-size: 34rpx;
          font-weight: 600;
          color: #222;
          max-width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .device-type {
          font-size: 26rpx;
          color: #999;
          background: #f5f5f5;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
        }
      }

      .device-status {
        display: flex;
        margin-bottom: 20rpx;
        gap: 12rpx;
        .status-tag {
          padding: 8rpx 16rpx;
          border-radius: 8rpx;
          color: #fff;
          font-size: 24rpx;
          font-weight: 500;
          white-space: nowrap;
        }
        .status-tag_1 {
          background: linear-gradient(130deg, #52c41a 0%, #389e0d 100%);
        }
        .status-tag_2 {
          background: linear-gradient(130deg, #8c8c8c 0%, #595959 100%);
        }
        .status-tag_3 {
          background: linear-gradient(130deg, #4096ff 0%, #1677ff 100%);
        }
      }

      .device-info {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;

        > view {
          margin-bottom: 8rpx;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
</style>
